<template>
  <div class="bg-header" :class="`bg-header-${bgNumb}`">
    <div class="__head__title">{{ title || '' }}</div>
  </div>
</template>

<script>
export default {
  name: "HeadTitle",
  props: {
    title: {
      type: String
    },
    bgNumb: {
      type: [Number, String]
    }
  }
}
</script>

<style lang="scss">
.bg-header {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 35px;
  background-repeat: no-repeat;
  background-position-y: 7px;
  @for $i from 1 through 7 {
    &.bg-header-#{$i} {
      background-image: url("../assets/img/bigScreenNew/line-#{$i}.png");
    }
  }

  .__head__title {
    padding-left: 18px;
    color: #8bb3ce;
    font-size: 14px;
    font-weight: 550;
    background-image: url("../assets/img/bigScreenNew/point.png");
    background-position-y: 1px;
    background-size: contain;
    background-repeat: no-repeat;
  }
}
</style>
